<template>
    <div class="f_div">
      <div class="t_div">运营管理 / <a href="#">签收单</a></div>
      <el-container>
  
        <el-header class="header2">
          <div class="h_div">
            <div class="h_in_vid">
              <el-form ref="form" :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="订单状态" prop="ord_type">
                <el-select v-model="ord_type" placeholder="请选择" :teleported="false" style="width: 180px;">
                  <el-option v-for="item in options" :key="item.dict_code" :label="item.dict_label"
                    :value="item.dict_code" />
                </el-select>
              </el-form-item>
                <el-form-item label="始发地：">
                  <el-input v-model="value" placeholder="请输入始发地"></el-input>
                </el-form-item>
                <el-form-item label="目的地：">
                  <el-input v-model="value1" placeholder="请输入目的地"></el-input>
                </el-form-item>
                <el-form-item label="签收日期">
                  <el-date-picker v-model="value2" type="datetimerange" range-separator="To"
                    start-placeholder="请选择日期" end-placeholder="请选择日期" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
            <el-form-item label="搜索：" style="float:left">
              <el-input v-model="value3" placeholder="请输入关键字搜索"></el-input>
            </el-form-item>
            <el-form-item style="float:left">
              <el-button type="primary" @click="tjian">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
  
  
              </el-form>
            </div>
          </div>
        </el-header>
        <el-main class="main">
          <el-table height="442px" :data="tableData" style="width: 100%" row-key="depart_id" default-expand-all stripe
            :header-cell-style="{
                background: '#F7F7F7',
                color: '#999',
                textAlign: 'center',
              }" :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="ord_number" label="订单号" width="120"></el-table-column>
            <el-table-column prop="client_name" label="客户" width="120"></el-table-column>
            <el-table-column prop="ord_startaddress" label="始发地" width="120"></el-table-column>
            <el-table-column prop="ord_destination" label="目的地" width="120"></el-table-column>
            <el-table-column prop="shipments_addres" label="发货地址" width="120"></el-table-column>
            <el-table-column prop="receiving_addres" label="收货地址" width="120"></el-table-column>
            <el-table-column prop="count" label="订单数量" width="120"></el-table-column>
            <el-table-column prop="sign_num" label="签收数量" width="120"></el-table-column>
            <el-table-column prop="sign_by" label="签收人" width="120"></el-table-column>
            <el-table-column prop="sign_time" label="签收时间" width="120"></el-table-column>
            <el-table-column label="操作">
              <template #default="scoped">
                <el-button type="text" size="small" @click="XQ(scoped.row.ord_id)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[4, 6, 8, 10]"
              :size="size" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script>
  import { ref, reactive, resolveComponent, onMounted } from "vue";
  import axios from "axios";
  import { useRouter } from "vue-router";
  import { ElMessage } from "element-plus";
  import $http from '@/axios/base.js';
 
  
  export default {
    setup() {
      let tableData = ref([]);
      let value = ref("");
      let value1 = ref("");
      let value2 = ref("");
      let value3 = ref("");
      let currentPage = ref("1");
      let pageSize = ref("10");
  
  
      let router = useRouter();
  
      function ZC(wb_number) {
          $http
          .put(`http://localhost:5261/api/Arrival_meter/ZCArrival/${wb_number}`)
          .then((res) => {
            if (res) {
              location.reload();
              setTimeout(() => {
                ElMessage.success("整车到站完成");
              }, 1000);
            } else {
              ElMessage.error("异常错误！");
            }
          })
          .catch((err) => console.log(err));
      }
  
      function formatOrderState(status) {
      switch (status) {
        case "0":
          return '待接单';
        case "1":
          return '待提货';
        case "2":
          return '待发车';
        case "3":
          return '运输中';
        case "4":
          return '待签收';
        case "5":
          return '已完成';
        case "6":
          return '已取消';
        case "7":
          return '已拒绝';
      }
    }
  
    
  
      function show() {
        $http.get(`http://localhost:5261/api/Signature_receipt/GetSignature_receipt/${currentPage.value},${pageSize.value}`)
          .then((res) => {
            tableData.value = res;
            res.forEach((item, index) => {
                getBill_ol(item.ord_id, index)
            });
            console.log(tableData.value);
            console.log("---------------");
          })
          .catch((err) => console.log(err));
      }

      const getBill_ol = (id, index) => {
        $http.get(`http://localhost:5261/api/Signature_receipt/GetOrd_id/${id}`)
        .then((res) => {
            Object.assign(tableData.value[index], res);
            console.log(tableData.value[index]);
            tableData.value[index].sign_time = new Date(tableData.value[index].sign_time).toISOString().slice(0,10).toString();
        })
        .catch((err) => console.log(err))
      }
  
      onMounted(() => {
        show();
      });
  
      function tjian() {
        $http.get(`http://localhost:5261/api/Signature_receipt/Sign_condition/${currentPage.value},${pageSize.value}?Ord_startaddress=${value.value}&Ord_destination=${value1.value}&Sign_time=${value2.value}&value2=${value3.value}`)
        .then((res) => {
          tableData.value = res;
          console.log(res);
          res.forEach((item, index) => {
            console.log(item.ord_id);
                getBill_ol(item.ord_id, index)
            });
            SignCount();
        })
        .catch((err) => console.log(err));
      }
  
      function SignCount() {
      $http.get(`http://localhost:5261/api/Signature_receipt/Count?Sign_time=${value2.value}&value2=${value3.value}&Ord_startaddress=${value.value}&Ord_destination=${value1.value}`).then((res) => {
        // count.value = res;
        // console.log(count.value);
      }).catch((err) => {
        console.log("错误：" + err);
      })
    }
    SignCount();
  
      const searchForm = reactive({
        level: "1",
        dateRange: "",
        keyword: "",
      });
  
      let currentRow = ref(null);
  
  
      function handleSearch() {
        console.log(searchForm);
      }
  
      function handleReset() {
        // 重置表单
        searchForm.level = "";
        searchForm.dateRange = "";
        searchForm.keyword = "";
        // 重置表格数据
        // ...
      }
  
      function handlePageChange(val) {
        currentPage.value = val;
      }
  
  
      function XQ(id) {
        // alert(id,ord_number)
        router.push({path:'/Signature_xq', query: { id}}

        )
    }
  
  
  
  
  
      return {
        value,
        value1,
        value2,
        value3,
        tableData,
        searchForm,
        currentPage,
        pageSize,
        handleSearch,
        handleReset,
        handlePageChange,
        XQ,
        currentRow,
        show,
        tjian,
        ZC,
        formatOrderState,
        SignCount
      };
    },
  };
  </script>
  
  <style scoped>
  .pagination-container {
    display: flex;
    justify-content: right;
    margin-top: 20px;
  }
  
  .t_div {
    margin-bottom: 20px;
    text-align: left;
    font-size: 14px;
    color: #b3b4b6;
  }
  
  a {
    text-decoration: none;
  }
  
  .f_div {
    padding: 0px 50px;
  }
  
  .h_div {
    height: 39px;
  }
  
  .h_in_vid {
    width: 1400px;
    height: 20px;
    margin-top: 20px;
    display: flex;
  }
  
  .header {
    background-color: #ffffff;
    border-radius: 10px 10px 0px 0px;
  }
  
  .header2 {
    background-color: #ffffff;
  }
  
  .main {
    background-color: #ffffff;
    border-radius: 0px 0px 10px 10px;
    height: 650px;
  }
  .el-header{
    height: 100px;
  }
  </style>